#{extends 'Houses/base.html' /}
#{set title:'House-detail' /}

#{set "moreSubpageStyles"}
<style type="text/css">
	.show-detail{
		font-size: 16px;
	}
	.table .price+small{
		padding-left: 1em;
		padding-right: 0;
	}

	.table > tbody > tr > td{
		border-top: none;
	}
	#describe img,#profile img{
		margin:10px auto; 
	}
	#resource .thumbnail{
		border:1px solid #ddd;
		border-radius: 4px;
		padding: 4px;
		text-align: center;
		margin-bottom: 10px;
	}
	.preview-img{
		position: relative;
		padding:0px 10px 0px 10px;
		margin-top: 10px;
	}
	.preview-img ul{
		position: absolute;
		padding-left: 0px;
		top:0;
		left:0;
		height: 41px;
		white-space:nowrap;
	}
	.show-box li{
		display: inline-block;
		margin-right:-4px;	
		width:58px;
		cursor: pointer;
	}
	.show-box li img{
		height: 50px;
		overflow: hidden;
	}
	#next,#prev{
		display: inline-block;
		position: absolute;
		width:10px;
		height: 16px;
		top:10px;
	}
	#prev{
		left:0;
		background: url(../public/images/left.png) no-repeat;
	}
	#next{
		right: 0;
		background:url(../public/images/right.png) no-repeat;
	}
	.show-img img{
		height: 200px;
	}
	.img-small{
		overflow: hidden;
		position: relative;
		height: 41px;
	}
</style>
#{/set}
<!-- 路径导航 -->
<ol class="breadcrumb">
	<li><a href="#">首页</a></li>
	<li ><a href="">社区租房</a></li>
	<li class="active">租房详细</li>
</ol>
		<div class="main-content row">

			<div class="col-md-12">
			<h2>${house.community}${house.decorationSituation}${house.classSituation}&nbsp&nbsp&nbsp有匙即看</h2>
			<p class="sub col-md-12">
				<small>发布时间：${house.date}</small>
		 </p> 
			<div class="show-box col-md-5 col-sm-12">
			<div class="show-img">
				<a href="#" class="thumbnail"><img src="${photo[0]}"   alt="房子内部图"></a>
			</div>
			<div class="preview-img">
				<a id="prev"></a>
				<a id="next"></a>
				<div class="img-small">

					<ul>
						#{list items:photo,as:'photo1'}
						<li><img src="${photo1}"  alt="房子内部图"></li>
						
						#{/list}


					</ul>
				</div>
			</div>
		</div>

			<div class="show-detail col-md-7 col-sm-12">
				<table class="table table-hover table-condensed">
					<tr>
						<td class="detail-item col-md-3"><p>价格</p></td>
						<td>
							<p><span class="price">${house.price}</span>元
							<small>${house.way}</small></p>
						</td>
					</tr>
					<tr>
						<td class="detail-item col-md-3"><p>概况</p></td>
						<td>
							<p>
								<small>${house.bedRoom}室${house.livingRoom}厅${house.bathRoom}卫</small>
								<small>${house.square}㎡</small>
								<small>${house.classSituation}</small>
								<small>${house.decorationSituation}</small><br>
								<small>家电配备：${house.equipment}</small>
							</p>
						</td>
					</tr>
					<tr>
						<td class="detail-item col-md-3"><p>楼层</p></td>
						<td>
							<p>
								<small>${house.currentFloor}/${house.countFloor}层</small>
							</p>
						</td>
					</tr>
					<tr>
						<td class="detail-item col-md-3"><p>区域</p></td>
						<td>
							<p>
								<small>${house.community}</small>
							</p>
						</td>
					</tr>
					<tr>
						<td class="detail-item col-md-3"><p>地址</p></td>
						<td>
							<p>
								<small>${house.address}</small>
							</p>
						</td>
					</tr>
					<tr>
						<td class="detail-item col-md-3"><p>联系人</p></td>
						<td>
							<p>
								<small>${house.contacts}（${house.indentity}）</small>
								<small>${house.phone}</small>
							</p>
						</td>
					</tr>
				</table>
				
			</div>
		</div>
		<!-- Nav tabs -->
		<div class="col-md-12">
			<ul class="nav nav-tabs col-md-12" role="tablist">
				<li class="active"><a href="#describe" role="tab" data-toggle="tab">房源描述</a></li>
				<li><a href="#profile" role="tab" data-toggle="tab">小区介绍</a></li>
				<li><a href="#resource" role="tab" data-toggle="tab">附近房源</a></li>
			</ul>
			<div class="alert alert-success col-md-12" role="alert">如果发现房屋有任何虚假地方，欢迎<a>举报</a></div>
		</div>
		
		<!-- Tab panes -->
		<div class="tab-content col-md-11">
			<!-- Tab panes -->
			<div class="tab-content row">
			  <div class="tab-pane active" id="describe">
			  	<ul class="sub col-md-12">
			  		<strong>房屋配置:</strong>
			  		<li>${house.equipment}</li>			  		
			  	</ul>
			  	<ol>
			  		<li>${house.details}</li>
			  	</ol>
			  	<ul class="col-md-9">
			  		#{list items:photo,as:'photo2'}
			  		<li class="thumbnail"><img src="${photo2}" alt="房子内部图" class="img-responsive"  data-src="holder.js/100%x180"></li>
			  		#{/list}
			  	</ul>
			  </div>
			  <div class="tab-pane  col-md-12" id="profile">
				  <div class="col-md-5">
				  	<a class="thumbnail"><img src="../public/images/community.jpg" data-src="holder.js/100%x180" alt="community"></a>
				  </div>
				  <div class="col-md-6" style="margin-top:10%;">
				  	<p>小区名称：保利林语山庄</p>

					<p>小区地址：开创大道北与广汕路交汇处</p>
				</div>
			</div>
			<div class="tab-pane col-md-12" id="resource">
				<div class="col-sm-6 col-sm-3">
					<div class="thumbnail">
						<img data-src="holder.js/300x300" alt="house" src="../public/images/house5.jpg">
						<div class="caption">
							<a>开创大道北保利林语山庄 3室2厅109平米 押二付一</a>
							<p><em class="price">3200</em>元</p>				  
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-sm-3">
					<div class="thumbnail">
						<img data-src="holder.js/300x300" alt="house" src="../public/images/house5.jpg">
						<div class="caption">
							<a>开创大道北保利林语山庄 3室2厅109平米 押二付一</a>
							<p><em class="price">3200</em>元</p>				  
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-sm-3">
					<div class="thumbnail">
						<img data-src="holder.js/300x300" alt="house" src="../public/images/house5.jpg">
						<div class="caption">
							<a>开创大道北保利林语山庄 3室2厅109平米 押二付一</a>
							<p><em class="price">3200</em>元</p>				  
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-sm-3">
					<div class="thumbnail">
						<img data-src="holder.js/300x300" alt="house" src="../public/images/house5.jpg">
						<div class="caption">
							<a>开创大道北保利林语山庄 3室2厅109平米 押二付一</a>
							<p><em class="price">3200</em>元</p>				  
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
